<!DOCTYPE html>


<html theme="dark" showBanner="true" hasBanner="false" > 
<link href="https://cdn.staticfile.org/font-awesome/6.4.2/css/fontawesome.min.css" rel="stylesheet">
<link href="https://cdn.staticfile.org/font-awesome/6.4.2/css/brands.min.css" rel="stylesheet">
<link href="https://cdn.staticfile.org/font-awesome/6.4.2/css/solid.min.css" rel="stylesheet">
<script src="/hexo-blog/js/color.global.min.js" ></script>
<script src="/hexo-blog/js/load-settings.js" ></script>
<head>
  <meta charset="utf-8">
  
  
  

  
  <title>bressanone</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <link rel="preload" href="/hexo-blog/css/fonts/Roboto-Regular.ttf" as="font" type="font/ttf" crossorigin="anonymous">
  <link rel="preload" href="/hexo-blog/css/fonts/Roboto-Bold.ttf" as="font" type="font/ttf" crossorigin="anonymous">

  <meta property="og:type" content="website">
<meta property="og:title" content="bressanone">
<meta property="og:url" content="http://example.com/index.html">
<meta property="og:site_name" content="bressanone">
<meta property="og:locale" content="zh_CN">
<meta property="article:author" content="Zachary">
<meta name="twitter:card" content="summary">
  
  
    <link rel="icon" media="(prefers-color-scheme: light)" href="/hexo-blog/images/favicon-light-32.png" sizes="32x32">
    <link rel="icon" media="(prefers-color-scheme: light)" href="/hexo-blog/images/favicon-light-128.png" sizes="128x128">
    <link rel="icon" media="(prefers-color-scheme: light)" href="/hexo-blog/images/favicon-light-180.png" sizes="180x180">
    <link rel="icon" media="(prefers-color-scheme: light)" href="/hexo-blog/images/favicon-light-192.png" sizes="192x192">
    <link rel="icon" media="(prefers-color-scheme: dark)" href="/hexo-blog/images/favicon-dark-32.png" sizes="32x32">
    <link rel="icon" media="(prefers-color-scheme: dark)" href="/hexo-blog/images/favicon-dark-128.png" sizes="128x128">
    <link rel="icon" media="(prefers-color-scheme: dark)" href="/hexo-blog/images/favicon-dark-180.png" sizes="180x180">
    <link rel="icon" media="(prefers-color-scheme: dark)" href="/hexo-blog/images/favicon-dark-192.png" sizes="192x192">
  
  
<link rel="stylesheet" href="/hexo-blog/css/style.css">

<meta name="generator" content="Hexo 7.1.1"></head>

<body>
  
   
  <div id="main-grid" class="  ">
    <div id="nav" class=" is_home "  >
      <navbar id="navbar">
  <nav id="title-nav">
    <a href="/hexo-blog/">
      <div id="vivia-logo">
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
      </div>
      <div>bressanone </div>
    </a>
  </nav>
  <nav id="main-nav">
    
      <a class="main-nav-link" href="/hexo-blog/">主页</a>
    
      <a class="main-nav-link" href="/hexo-blog/archives">归档</a>
    
      <a class="main-nav-link" href="/hexo-blog/about">关于</a>
    
  </nav>
  <nav id="sub-nav">
    <a id="theme-btn" class="nav-icon">
      <span class="light-mode-icon"><svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 -960 960 960" width="20"><path d="M438.5-829.913v-48q0-17.452 11.963-29.476 11.964-12.024 29.326-12.024 17.363 0 29.537 12.024t12.174 29.476v48q0 17.452-11.963 29.476-11.964 12.024-29.326 12.024-17.363 0-29.537-12.024T438.5-829.913Zm0 747.826v-48q0-17.452 11.963-29.476 11.964-12.024 29.326-12.024 17.363 0 29.537 12.024t12.174 29.476v48q0 17.452-11.963 29.476-11.964 12.024-29.326 12.024-17.363 0-29.537-12.024T438.5-82.087ZM877.913-438.5h-48q-17.452 0-29.476-11.963-12.024-11.964-12.024-29.326 0-17.363 12.024-29.537t29.476-12.174h48q17.452 0 29.476 11.963 12.024 11.964 12.024 29.326 0 17.363-12.024 29.537T877.913-438.5Zm-747.826 0h-48q-17.452 0-29.476-11.963-12.024-11.964-12.024-29.326 0-17.363 12.024-29.537T82.087-521.5h48q17.452 0 29.476 11.963 12.024 11.964 12.024 29.326 0 17.363-12.024 29.537T130.087-438.5Zm660.174-290.87-34.239 32q-12.913 12.674-29.565 12.174-16.653-.5-29.327-13.174-12.674-12.673-12.554-28.826.12-16.152 12.794-28.826l33-35q12.913-12.674 30.454-12.674t30.163 12.847q12.709 12.846 12.328 30.826-.38 17.98-13.054 30.653ZM262.63-203.978l-32 34q-12.913 12.674-30.454 12.674t-30.163-12.847q-12.709-12.846-12.328-30.826.38-17.98 13.054-30.653l33.239-31q12.913-12.674 29.565-12.174 16.653.5 29.327 13.174 12.674 12.673 12.554 28.826-.12 16.152-12.794 28.826Zm466.74 33.239-32-33.239q-12.674-12.913-12.174-29.565.5-16.653 13.174-29.327 12.673-12.674 28.826-13.054 16.152-.38 28.826 12.294l35 33q12.674 12.913 12.674 30.454t-12.847 30.163q-12.846 12.709-30.826 12.328-17.98-.38-30.653-13.054ZM203.978-697.37l-34-33q-12.674-12.913-13.174-29.945-.5-17.033 12.174-29.707t31.326-13.293q18.653-.62 31.326 13.054l32 34.239q11.674 12.913 11.174 29.565-.5 16.653-13.174 29.327-12.673 12.674-28.826 12.554-16.152-.12-28.826-12.794ZM480-240q-100 0-170-70t-70-170q0-100 70-170t170-70q100 0 170 70t70 170q0 100-70 170t-170 70Zm-.247-82q65.703 0 111.475-46.272Q637-414.544 637-480.247t-45.525-111.228Q545.95-637 480.247-637t-111.475 45.525Q323-545.95 323-480.247t45.525 111.975Q414.05-322 479.753-322ZM481-481Z"/></svg></span>
      <span class="dark-mode-icon"><svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 -960 960 960" width="20"><path d="M480.239-116.413q-152.63 0-258.228-105.478Q116.413-327.37 116.413-480q0-130.935 77.739-227.435t206.304-125.043q43.022-9.631 63.87 10.869t3.478 62.805q-8.891 22.043-14.315 44.463-5.424 22.42-5.424 46.689 0 91.694 64.326 155.879 64.325 64.186 156.218 64.186 24.369 0 46.978-4.946 22.609-4.945 44.413-14.076 42.826-17.369 62.967 1.142 20.142 18.511 10.511 61.054Q807.174-280 712.63-198.206q-94.543 81.793-232.391 81.793Zm0-95q79.783 0 143.337-40.217 63.554-40.218 95.793-108.283-15.608 4.044-31.097 5.326-15.49 1.283-31.859.805-123.706-4.066-210.777-90.539-87.071-86.473-91.614-212.092-.24-16.369.923-31.978 1.164-15.609 5.446-30.978-67.826 32.478-108.282 96.152Q211.652-559.543 211.652-480q0 111.929 78.329 190.258 78.329 78.329 190.258 78.329ZM466.13-465.891Z"/></svg></span>
    </a>
    
    <div id="nav-menu-btn" class="nav-icon">
      <svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 -960 960 960" width="20"><path d="M177.37-252.282q-17.453 0-29.477-11.964-12.024-11.963-12.024-29.326t12.024-29.537q12.024-12.174 29.477-12.174h605.26q17.453 0 29.477 11.964 12.024 11.963 12.024 29.326t-12.024 29.537q-12.024 12.174-29.477 12.174H177.37Zm0-186.218q-17.453 0-29.477-11.963-12.024-11.964-12.024-29.326 0-17.363 12.024-29.537T177.37-521.5h605.26q17.453 0 29.477 11.963 12.024 11.964 12.024 29.326 0 17.363-12.024 29.537T782.63-438.5H177.37Zm0-186.217q-17.453 0-29.477-11.964-12.024-11.963-12.024-29.326t12.024-29.537q12.024-12.174 29.477-12.174h605.26q17.453 0 29.477 11.964 12.024 11.963 12.024 29.326t-12.024 29.537q-12.024 12.174-29.477 12.174H177.37Z"/></svg>
    </div>
  </nav>
</navbar>
<div id="nav-dropdown" class="hidden">
  <div id="dropdown-link-list">
    
      <a class="nav-dropdown-link" href="/hexo-blog/">主页</a>
    
      <a class="nav-dropdown-link" href="/hexo-blog/archives">归档</a>
    
      <a class="nav-dropdown-link" href="/hexo-blog/about">关于</a>
    
     
    </div>
</div>
<script>
  let dropdownBtn = document.getElementById("nav-menu-btn");
  let dropdownEle = document.getElementById("nav-dropdown");
  dropdownBtn.onclick = function() {
    dropdownEle.classList.toggle("hidden");
  }
</script>
    </div>
    <div id="sidebar-wrapper">
      <sidebar id="sidebar">
  
    <div class="widget-wrap">
  <div class="info-card">
    <div class="avatar">
      
      <div class="img-dim"></div>
    </div>
    <div class="info">
      <div class="username">Zachary </div>
      <div class="dot"></div>
      <div class="subtitle"> </div>
      <div class="link-list">
        
          <a class="link-btn" target="_blank" rel="noopener" href="https://github.com/zzy1661" title="GitHub"><i class="fa-brands fa-github"></i></a>
         
      </div>  
    </div>
  </div>
</div>

  
  <div class="sticky">
    
      


  <div class="widget-wrap">
    <div class="widget">
      <h3 class="widget-title">分类</h3>
      <div class="category-box">
            <a class="category-link" href="/hexo-blog/categories/%E5%89%8D%E7%AB%AF%E7%AC%94%E8%AE%B0/">
                前端笔记
                <div class="category-count">78</div>
            </a>
        
            <a class="category-link" href="/hexo-blog/categories/%E7%AE%97%E6%B3%95%E6%89%8B%E5%86%8C/">
                算法手册
                <div class="category-count">7</div>
            </a>
        </div>
    </div>
  </div>


    
      
  <div class="widget-wrap">
    <div class="widget">
      <h3 class="widget-title">标签</h3>
      <ul class="widget-tag-list" itemprop="keywords"><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/Ant-Design/" rel="tag">Ant Design</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/CSS/" rel="tag">CSS</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/Canvas/" rel="tag">Canvas</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/Docker/" rel="tag">Docker</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/ECMAScript-6/" rel="tag">ECMAScript 6</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/JavaScript/" rel="tag">JavaScript</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/Less/" rel="tag">Less</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/MobX/" rel="tag">MobX</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/MongoDB/" rel="tag">MongoDB</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/NPM/" rel="tag">NPM</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/NestJS/" rel="tag">NestJS</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/Node-js/" rel="tag">Node.js</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/Postman/" rel="tag">Postman</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/React-js/" rel="tag">React.js</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/Redux/" rel="tag">Redux</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/TypeScript/" rel="tag">TypeScript</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/UML/" rel="tag">UML</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/Webpack/" rel="tag">Webpack</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/Yeoman/" rel="tag">Yeoman</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/%E5%89%8D%E7%AB%AF/" rel="tag">前端</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/%E6%9E%B6%E6%9E%84/" rel="tag">架构</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/" rel="tag">正则表达式</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/%E6%BA%90%E7%A0%81/" rel="tag">源码</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/%E7%88%AC%E8%99%AB/" rel="tag">爬虫</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/%E7%AE%97%E6%B3%95/" rel="tag">算法</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/%E9%9D%A2%E8%AF%95/" rel="tag">面试</a></li></ul>
    </div>
  </div>


    
  </div>
</sidebar>
    </div>
    <div id="content-body">
      
   


<article id="post-再看箭头函数的this指向——《JavaScript高级程序设计》造成的歧义" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
   
  <div class="article-inner">
    <div class="article-main">
      <header class="article-header">
        
<div class="main-title-bar">
  <div class="main-title-dot"></div>
  
    
      <h1 itemprop="name">
        <a class="p-name article-title" href="/hexo-blog/2022/03/16/%E5%86%8D%E7%9C%8B%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0%E7%9A%84this%E6%8C%87%E5%90%91%E2%80%94%E2%80%94%E3%80%8AJavaScript%E9%AB%98%E7%BA%A7%E7%A8%8B%E5%BA%8F%E8%AE%BE%E8%AE%A1%E3%80%8B%E9%80%A0%E6%88%90%E7%9A%84%E6%AD%A7%E4%B9%89/">再看箭头函数的this指向——《JavaScript高级程序设计》造成的歧义</a>
      </h1>
    
  
</div>

        <div class='meta-info-bar'>
          <div class="meta-info">
  <time class="dt-published" datetime="2022-03-15T16:00:00.000Z" itemprop="datePublished">2022-03-16</time>
</div>
          <div class="need-seperator meta-info">
            <div class="meta-cate-flex">
  
  <a class="meta-cate-link" href="/hexo-blog/categories/%E5%89%8D%E7%AB%AF%E7%AC%94%E8%AE%B0/">前端笔记</a>
   
</div>
  
          </div>
          <div class="wordcount need-seperator meta-info">
            1.3k 词 
          </div>
        </div>
        
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/hexo-blog/tags/JavaScript/" rel="tag">JavaScript</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/hexo-blog/tags/%E5%89%8D%E7%AB%AF/" rel="tag">前端</a></li></ul>

      </header>
      <div class="e-content article-entry" itemprop="articleBody">
        
          <div class="truncate-text">
            
              箭头函数中的this指向什么？
这是一道经典JS问题。很多人都认为，箭头函数中的this，指向的是它定义时的环境中的this。这个观点来自于《JavaScript高级程序设计》，它关于箭头函数的this有如下解释：

在箭头函数中，this引用的是定义箭头函数的上下文。 …


事件回调或定时回调中调用某个函数时，this值指向的并非想要的对象。此时将回调函数写成箭头函数就可以解决问题。这是因为箭头函数中的this会保留定义该函数时的上下文

并且还给出了一个经典例子：
12345678window.color = &#x27;red&#x27;;let o = &#123;    color:&#x27;blue&#x27;&#125;let sayColor = ()=&gt;console.log(this.color)sayColor(); //redo.sayColor = sayColor;o.sayColor(); //red

根据它的解释，我们可以这么理解：定义sayColor时的上下文中的this是window，因此这个函数中的this始终绑定了window。...
            
          </div>
        
      </div>

         
    </div>
    
     
    <a class="right-panel  non-pic  "
      
      href="/hexo-blog/2022/03/16/%E5%86%8D%E7%9C%8B%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0%E7%9A%84this%E6%8C%87%E5%90%91%E2%80%94%E2%80%94%E3%80%8AJavaScript%E9%AB%98%E7%BA%A7%E7%A8%8B%E5%BA%8F%E8%AE%BE%E8%AE%A1%E3%80%8B%E9%80%A0%E6%88%90%E7%9A%84%E6%AD%A7%E4%B9%89/" 
    >
       
      <i class="fa-solid fa-angle-right non-pic"></i>
       
    </a>
     
  </div>
  
</article>






   


<article id="post-前端docker快速入门——Compose" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
   
  <div class="article-inner">
    <div class="article-main">
      <header class="article-header">
        
<div class="main-title-bar">
  <div class="main-title-dot"></div>
  
    
      <h1 itemprop="name">
        <a class="p-name article-title" href="/hexo-blog/2022/03/06/%E5%89%8D%E7%AB%AFdocker%E5%BF%AB%E9%80%9F%E5%85%A5%E9%97%A8%E2%80%94%E2%80%94Compose/">前端docker快速入门——Compose</a>
      </h1>
    
  
</div>

        <div class='meta-info-bar'>
          <div class="meta-info">
  <time class="dt-published" datetime="2022-03-05T16:00:00.000Z" itemprop="datePublished">2022-03-06</time>
</div>
          <div class="need-seperator meta-info">
            <div class="meta-cate-flex">
  
  <a class="meta-cate-link" href="/hexo-blog/categories/%E5%89%8D%E7%AB%AF%E7%AC%94%E8%AE%B0/">前端笔记</a>
   
</div>
  
          </div>
          <div class="wordcount need-seperator meta-info">
            2k 词 
          </div>
        </div>
        
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/hexo-blog/tags/Docker/" rel="tag">Docker</a></li></ul>

      </header>
      <div class="e-content article-entry" itemprop="articleBody">
        
          <div class="truncate-text">
            
              前言前文介绍了Dockerfile文件，但在实际应用中还有一个常见的文件——docker-compose.yml，本文便介绍Compose的使用方法。
ComposeCompose定位是“定义和运行多个Docker容器的应用”。
docker可以很方便地起一个应用容器，但是我们项目实践中往往需要多个应用。比如一个web项目，可能需要启动nginx,redis,mysql等多个应用容器，它们之间可能还需要相互配合。Compose可以让用户通过编写一个简单的模板文件，快速地创建和管理基于Docker容器的应用集群。
服务和项目Compose中有两个重要的概念：服务（service）和项目（project）。

服务：一个应用的容器，实际上可以包括若干运行相同镜像的容器实例。
项目：由一组关联的应用容器组成的一个完整业务单元。

模板文件Compose默认的模板文件名是docker-compose.yml。下面是docker-compose.yml文件的一个例子：
123456789version: &quot;3&quot;services:  webapp:    image: e...
            
          </div>
        
      </div>

         
    </div>
    
     
    <a class="right-panel  non-pic  "
      
      href="/hexo-blog/2022/03/06/%E5%89%8D%E7%AB%AFdocker%E5%BF%AB%E9%80%9F%E5%85%A5%E9%97%A8%E2%80%94%E2%80%94Compose/" 
    >
       
      <i class="fa-solid fa-angle-right non-pic"></i>
       
    </a>
     
  </div>
  
</article>






   


<article id="post-前端docker快速入门——Dockerfile" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
   
  <div class="article-inner">
    <div class="article-main">
      <header class="article-header">
        
<div class="main-title-bar">
  <div class="main-title-dot"></div>
  
    
      <h1 itemprop="name">
        <a class="p-name article-title" href="/hexo-blog/2022/03/05/%E5%89%8D%E7%AB%AFdocker%E5%BF%AB%E9%80%9F%E5%85%A5%E9%97%A8%E2%80%94%E2%80%94Dockerfile/">前端docker快速入门——Dockerfile</a>
      </h1>
    
  
</div>

        <div class='meta-info-bar'>
          <div class="meta-info">
  <time class="dt-published" datetime="2022-03-04T16:00:00.000Z" itemprop="datePublished">2022-03-05</time>
</div>
          <div class="need-seperator meta-info">
            <div class="meta-cate-flex">
  
  <a class="meta-cate-link" href="/hexo-blog/categories/%E5%89%8D%E7%AB%AF%E7%AC%94%E8%AE%B0/">前端笔记</a>
   
</div>
  
          </div>
          <div class="wordcount need-seperator meta-info">
            2.9k 词 
          </div>
        </div>
        
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/hexo-blog/tags/Docker/" rel="tag">Docker</a></li></ul>

      </header>
      <div class="e-content article-entry" itemprop="articleBody">
        
          <div class="truncate-text">
            
              前言前文介绍了docker中最最常用的几个命令，但漏了一个build命令。build构建镜像通常需要编写一个Dockerfile的文件，这个文件上手也很简单，只要记住几个常用的指令就行了。
docker镜像的分层存储这里需要先补充一个关于镜像概念：分层存储。
前文将镜像类比为一个装机文件，但实际上镜像并非由一个文件组成，而是由一组文件系统组成，或者说，由多层文件系统联合组成。
镜像构建时，会一层层构建，前一层是后一层的基础。每一层构建完就不会再发生改变，后一层上的任何改变只发生在自己这一层。

联合文件系统（UnionFS）是一种轻量级的高性能分层文件系统，它支持将文件系统中的修改信息作为一次提交，并层层叠加，同时可以将不同目录挂载到同一个虚拟文件系统下，应用看到的是挂载的最终结果。联合文件系统是实现Docker镜像的技术基础。

分层能有哪些好处呢？这里可以举两个好理解的例子。比如镜像升级的时候，会创建一个新层，而不会改动之前的文件，那么其他人更新镜像的时候，只需要添加新层，而不必替换原来的整个镜像。另外，当我们拉取镜像的时候，是先拿到该镜像的配置文件，从中读取镜像layer的...
            
          </div>
        
      </div>

         
    </div>
    
     
    <a class="right-panel  non-pic  "
      
      href="/hexo-blog/2022/03/05/%E5%89%8D%E7%AB%AFdocker%E5%BF%AB%E9%80%9F%E5%85%A5%E9%97%A8%E2%80%94%E2%80%94Dockerfile/" 
    >
       
      <i class="fa-solid fa-angle-right non-pic"></i>
       
    </a>
     
  </div>
  
</article>






   


<article id="post-前端docker快速入门——常用命令" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
   
  <div class="article-inner">
    <div class="article-main">
      <header class="article-header">
        
<div class="main-title-bar">
  <div class="main-title-dot"></div>
  
    
      <h1 itemprop="name">
        <a class="p-name article-title" href="/hexo-blog/2022/02/28/%E5%89%8D%E7%AB%AFdocker%E5%BF%AB%E9%80%9F%E5%85%A5%E9%97%A8%E2%80%94%E2%80%94%E5%B8%B8%E7%94%A8%E5%91%BD%E4%BB%A4/">前端docker快速入门——常用命令</a>
      </h1>
    
  
</div>

        <div class='meta-info-bar'>
          <div class="meta-info">
  <time class="dt-published" datetime="2022-02-27T16:00:00.000Z" itemprop="datePublished">2022-02-28</time>
</div>
          <div class="need-seperator meta-info">
            <div class="meta-cate-flex">
  
  <a class="meta-cate-link" href="/hexo-blog/categories/%E5%89%8D%E7%AB%AF%E7%AC%94%E8%AE%B0/">前端笔记</a>
   
</div>
  
          </div>
          <div class="wordcount need-seperator meta-info">
            1.2k 词 
          </div>
        </div>
        
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/hexo-blog/tags/Docker/" rel="tag">Docker</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/hexo-blog/tags/%E5%89%8D%E7%AB%AF/" rel="tag">前端</a></li></ul>

      </header>
      <div class="e-content article-entry" itemprop="articleBody">
        
          <div class="truncate-text">
            
              「这是我参与2022首次更文挑战的第29天，活动详情查看：2022首次更文挑战」
前言docker渐渐成为前端避不开的一个知识点，好在docker上手非常简单，看完本文，十分钟带你入门。
docker介绍在docker之前，我们先对容器有个概念：容器能有效地将由单个操作系统管理的资源划分到孤立的组中，以更好地在孤立的组之间平衡有冲突的资源使用需求。
简单理解，容器可以看做是一个沙箱，每个容器运行着自己的应用，不同容器之间相互隔离，但也可以通过网络通信。
在docker之前，最重要的容器技术是LXC(Linux Containers),docker在它的基础上进一步优化了容器的使用体验，比如提供了各种容器管理工具（分发、版本、移植），以及引入分层文件系统和高效的镜像机制。
网上有很多文章对docker介绍的非常详细了，但是如果是没有接触过服务端、虚拟机的新手，只要记住容器这个概念就行了。至于docker有哪些好处，什么情况下使用docker，当你学会docker的基本操作后，自然就能回答这些问题了。
docker核心概念镜像镜像可以类比为一个装机光盘。镜像是一个只读的模板，不包含任...
            
          </div>
        
      </div>

         
    </div>
    
     
    <a class="right-panel  non-pic  "
      
      href="/hexo-blog/2022/02/28/%E5%89%8D%E7%AB%AFdocker%E5%BF%AB%E9%80%9F%E5%85%A5%E9%97%A8%E2%80%94%E2%80%94%E5%B8%B8%E7%94%A8%E5%91%BD%E4%BB%A4/" 
    >
       
      <i class="fa-solid fa-angle-right non-pic"></i>
       
    </a>
     
  </div>
  
</article>






   


<article id="post-排序算法之桶排序" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
   
  <div class="article-inner">
    <div class="article-main">
      <header class="article-header">
        
<div class="main-title-bar">
  <div class="main-title-dot"></div>
  
    
      <h1 itemprop="name">
        <a class="p-name article-title" href="/hexo-blog/2022/02/27/%E6%8E%92%E5%BA%8F%E7%AE%97%E6%B3%95%E4%B9%8B%E6%A1%B6%E6%8E%92%E5%BA%8F/">排序算法之桶排序</a>
      </h1>
    
  
</div>

        <div class='meta-info-bar'>
          <div class="meta-info">
  <time class="dt-published" datetime="2022-02-26T16:00:00.000Z" itemprop="datePublished">2022-02-27</time>
</div>
          <div class="need-seperator meta-info">
            <div class="meta-cate-flex">
  
  <a class="meta-cate-link" href="/hexo-blog/categories/%E7%AE%97%E6%B3%95%E6%89%8B%E5%86%8C/">算法手册</a>
   
</div>
  
          </div>
          <div class="wordcount need-seperator meta-info">
            1.9k 词 
          </div>
        </div>
        
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/hexo-blog/tags/%E7%AE%97%E6%B3%95/" rel="tag">算法</a></li></ul>

      </header>
      <div class="e-content article-entry" itemprop="articleBody">
        
          <div class="truncate-text">
            
              「这是我参与2022首次更文挑战的第28天，活动详情查看：2022首次更文挑战」
介绍桶排序，又称为箱排序，也是一种分布式排序算法。大致思想是先对元素进行分组（桶），然后对每个组内的元素进行排序（借助其他排序算法），最后将所有的桶合并为结果数组。
桶排序在最优情况下的时间复杂度为O(n)O(n)O(n),这种情况下每个桶只有一个数字，不需要进行比较。但是如果数据量巨大，会创建大量的桶而占用更多的内存。
实现首先准备一个简单的排序算法，比如插入排序（归并或快排是更好的选择，插入排序的复杂度更高，不过胜在简单，另外桶排序和核心也并不在这点上）。
123456789101112131415function insertSort(array) &#123;  const &#123; length &#125; = array;   for (let i = 1; i &lt; length; i++) &#123;    let j = i;    const temp = array[i]    while (j &gt; 0 &amp;&amp; array[j - 1] &gt;...
            
          </div>
        
      </div>

         
    </div>
    
     
    <a class="right-panel  non-pic  "
      
      href="/hexo-blog/2022/02/27/%E6%8E%92%E5%BA%8F%E7%AE%97%E6%B3%95%E4%B9%8B%E6%A1%B6%E6%8E%92%E5%BA%8F/" 
    >
       
      <i class="fa-solid fa-angle-right non-pic"></i>
       
    </a>
     
  </div>
  
</article>






   


<article id="post-MongoDB 整库导入" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
   
  <div class="article-inner">
    <div class="article-main">
      <header class="article-header">
        
<div class="main-title-bar">
  <div class="main-title-dot"></div>
  
    
      <h1 itemprop="name">
        <a class="p-name article-title" href="/hexo-blog/2022/02/24/MongoDB%20%E6%95%B4%E5%BA%93%E5%AF%BC%E5%85%A5/">MongoDB 整库导入</a>
      </h1>
    
  
</div>

        <div class='meta-info-bar'>
          <div class="meta-info">
  <time class="dt-published" datetime="2022-02-23T16:00:00.000Z" itemprop="datePublished">2022-02-24</time>
</div>
          <div class="need-seperator meta-info">
            <div class="meta-cate-flex">
  
  <a class="meta-cate-link" href="/hexo-blog/categories/%E5%89%8D%E7%AB%AF%E7%AC%94%E8%AE%B0/">前端笔记</a>
   
</div>
  
          </div>
          <div class="wordcount need-seperator meta-info">
            1.7k 词 
          </div>
        </div>
        
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/hexo-blog/tags/MongoDB/" rel="tag">MongoDB</a></li></ul>

      </header>
      <div class="e-content article-entry" itemprop="articleBody">
        
          <div class="truncate-text">
            
              「这是我参与2022首次更文挑战的第27天，活动详情查看：2022首次更文挑战」
背景兄弟部门扔了个文件夹过来，说是mongo导出的部分数据，需要测试一下。
文件夹里大概长这样：

我表示现在的前端可真不好干。。。
启动MongoDB既然是测试，那么本地使用docker起一个MongoDB是最方便的，编写docker-compose.yml如下：
12345678910111213141516171819202122version: &#x27;3.1&#x27;services:  mongo:    image: mongo    restart: always    ports:      - 27017:27017    environment:      MONGO_INITDB_ROOT_USERNAME: root      MONGO_INITDB_ROOT_PASSWORD: example  mongo-express:    image: mongo-express    restart: always    ports:      - 8081:8081 ...
            
          </div>
        
      </div>

         
    </div>
    
     
    <a class="right-panel  non-pic  "
      
      href="/hexo-blog/2022/02/24/MongoDB%20%E6%95%B4%E5%BA%93%E5%AF%BC%E5%85%A5/" 
    >
       
      <i class="fa-solid fa-angle-right non-pic"></i>
       
    </a>
     
  </div>
  
</article>






   


<article id="post-UML快速入门——活动图" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
   
  <div class="article-inner">
    <div class="article-main">
      <header class="article-header">
        
<div class="main-title-bar">
  <div class="main-title-dot"></div>
  
    
      <h1 itemprop="name">
        <a class="p-name article-title" href="/hexo-blog/2022/02/22/UML%E5%BF%AB%E9%80%9F%E5%85%A5%E9%97%A8%E2%80%94%E2%80%94%E6%B4%BB%E5%8A%A8%E5%9B%BE/">UML快速入门——活动图</a>
      </h1>
    
  
</div>

        <div class='meta-info-bar'>
          <div class="meta-info">
  <time class="dt-published" datetime="2022-02-21T16:00:00.000Z" itemprop="datePublished">2022-02-22</time>
</div>
          <div class="need-seperator meta-info">
            <div class="meta-cate-flex">
  
  <a class="meta-cate-link" href="/hexo-blog/categories/%E5%89%8D%E7%AB%AF%E7%AC%94%E8%AE%B0/">前端笔记</a>
   
</div>
  
          </div>
          <div class="wordcount need-seperator meta-info">
            776 词 
          </div>
        </div>
        
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/hexo-blog/tags/UML/" rel="tag">UML</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/hexo-blog/tags/%E6%9E%B6%E6%9E%84/" rel="tag">架构</a></li></ul>

      </header>
      <div class="e-content article-entry" itemprop="articleBody">
        
          <div class="truncate-text">
            
              「这是我参与2022首次更文挑战的第26天，活动详情查看：2022首次更文挑战」
活动图活动图是描述过程逻辑、业务流程和工作流的技术。在许多地方，它们扮演的角色类似于流程图，但和流程图表示法之间的首要区别是它们支持并行行为。
下面是一个活动图的示例：

活动图的主要要素
初始节点 初始节点用表示，表示活动的开始。
分叉和合流 分叉和合并都以表示，分叉有一个输入流和若干个输出的流，合流又称结合，它则有若干个输入流和一个输出流。

分叉并不是逻辑判断造成的分支，分叉的两个流在顺序上是无关的，或者是并行的。比如上图中，填写订单（fill order）和寄送发票（send invoice）是两个无关顺序的事件，可以先处理任意一件后再处理另一件。
如果有分叉而没有合流，说明这个活动只要任意分叉到达重点就结束。
合流旁边可以标注条件（结合规格）：

这是一个饮料贩卖机，只有选择了投币并选择了饮料，且投币超过饮料的价格时才会继续往下（这里投币和选择没有先后关系）

分支和合并 判断也成为分支，有一个输入流和若干个互斥的输出流。 而合并有若干个输入流和一个输出流，它代表判断造成的条件分支的结束。...
            
          </div>
        
      </div>

         
    </div>
    
     
    <a class="right-panel  non-pic  "
      
      href="/hexo-blog/2022/02/22/UML%E5%BF%AB%E9%80%9F%E5%85%A5%E9%97%A8%E2%80%94%E2%80%94%E6%B4%BB%E5%8A%A8%E5%9B%BE/" 
    >
       
      <i class="fa-solid fa-angle-right non-pic"></i>
       
    </a>
     
  </div>
  
</article>






   


<article id="post-UML快速入门——顺序图和通信图" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
   
  <div class="article-inner">
    <div class="article-main">
      <header class="article-header">
        
<div class="main-title-bar">
  <div class="main-title-dot"></div>
  
    
      <h1 itemprop="name">
        <a class="p-name article-title" href="/hexo-blog/2022/02/21/UML%E5%BF%AB%E9%80%9F%E5%85%A5%E9%97%A8%E2%80%94%E2%80%94%E9%A1%BA%E5%BA%8F%E5%9B%BE%E5%92%8C%E9%80%9A%E4%BF%A1%E5%9B%BE/">UML快速入门——顺序图和通信图</a>
      </h1>
    
  
</div>

        <div class='meta-info-bar'>
          <div class="meta-info">
  <time class="dt-published" datetime="2022-02-20T16:00:00.000Z" itemprop="datePublished">2022-02-21</time>
</div>
          <div class="need-seperator meta-info">
            <div class="meta-cate-flex">
  
  <a class="meta-cate-link" href="/hexo-blog/categories/%E5%89%8D%E7%AB%AF%E7%AC%94%E8%AE%B0/">前端笔记</a>
   
</div>
  
          </div>
          <div class="wordcount need-seperator meta-info">
            1.3k 词 
          </div>
        </div>
        
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/hexo-blog/tags/UML/" rel="tag">UML</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/hexo-blog/tags/%E6%9E%B6%E6%9E%84/" rel="tag">架构</a></li></ul>

      </header>
      <div class="e-content article-entry" itemprop="articleBody">
        
          <div class="truncate-text">
            
              「这是我参与2022首次更文挑战的第25天，活动详情查看：2022首次更文挑战」
交互图UML中交互图是顺序图和通信图的统称，这两种图都可以表示类似的交互，其中顺序图具有更丰富的符号标记，但是通信图也有其独特的功能，尤其适用于在墙上画草图。
顺序图顺序图是最常见的交互图。
生命线框顺序图以生命线框表示参与者，生命线框图包括框图之下的垂直延伸线。
消息在垂直生命线之间，用带实心箭头（同步消息）的实线并附以消息表达式的方式表示对象间的每个消息，生命线自上而下表示时间顺序。 
消息的返回可以在活动条末端使用应答（或返回）消息线表示消息的返回。 
发给自己的消息可以使用嵌套的活动条表示对象发送给自身的消息 
实例的创建和销毁下图的虚线部分表示实例的创建，消息名称中的create不是必需的  在某些情况下，需要显式地表示对象的销毁，可以用大X表示。 
循环和条件UML中可以用图框表示条件和循环。
循环loop表示条件为真的循环片段，也可以用loop(n)强调循环的次数，表示for循环时，还可以以loop(i,1,10)强调起点和终点。 
迭代集合loop还可以用来表示迭代集合，比如Set、...
            
          </div>
        
      </div>

         
    </div>
    
     
    <a class="right-panel  non-pic  "
      
      href="/hexo-blog/2022/02/21/UML%E5%BF%AB%E9%80%9F%E5%85%A5%E9%97%A8%E2%80%94%E2%80%94%E9%A1%BA%E5%BA%8F%E5%9B%BE%E5%92%8C%E9%80%9A%E4%BF%A1%E5%9B%BE/" 
    >
       
      <i class="fa-solid fa-angle-right non-pic"></i>
       
    </a>
     
  </div>
  
</article>






   


<article id="post-UML快速入门——类图进阶" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
   
  <div class="article-inner">
    <div class="article-main">
      <header class="article-header">
        
<div class="main-title-bar">
  <div class="main-title-dot"></div>
  
    
      <h1 itemprop="name">
        <a class="p-name article-title" href="/hexo-blog/2022/02/20/UML%E5%BF%AB%E9%80%9F%E5%85%A5%E9%97%A8%E2%80%94%E2%80%94%E7%B1%BB%E5%9B%BE%E8%BF%9B%E9%98%B6/">UML快速入门——类图进阶</a>
      </h1>
    
  
</div>

        <div class='meta-info-bar'>
          <div class="meta-info">
  <time class="dt-published" datetime="2022-02-19T16:00:00.000Z" itemprop="datePublished">2022-02-20</time>
</div>
          <div class="need-seperator meta-info">
            <div class="meta-cate-flex">
  
  <a class="meta-cate-link" href="/hexo-blog/categories/%E5%89%8D%E7%AB%AF%E7%AC%94%E8%AE%B0/">前端笔记</a>
   
</div>
  
          </div>
          <div class="wordcount need-seperator meta-info">
            825 词 
          </div>
        </div>
        
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/hexo-blog/tags/UML/" rel="tag">UML</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/hexo-blog/tags/%E6%9E%B6%E6%9E%84/" rel="tag">架构</a></li></ul>

      </header>
      <div class="e-content article-entry" itemprop="articleBody">
        
          <div class="truncate-text">
            
              「这是我参与2022首次更文挑战的第24天，活动详情查看：2022首次更文挑战」
类图前文介绍了最基本的类图，下面介绍多种场景下的类图表示方法。
关联类图描述属性时，还有一种表示方式——关联。
以关联的方式表示订单类中的属性：

关联能够更清晰的表示多重性，适合表示一些重要的类。另外类与类之间也可以以这种箭头形式表示他们的关联关系。
双向关联关联可以是双向的，如下图：  这张图表示Car有个属性owner，对应0或1个Person。Person有个属性cars，对应0或多个Car。（当然这个属性也可能不叫cars，但习惯上会把这个属性命名为cars）
限定关联限定关联比较少见，它的图形是：  从这个图里可以看到，在一个Order中，对每个Product都可能有1个OrderLine，但并不表示Order一定有一个Product的属性，它暗示的是Order获取OrderLine，需要一个Product的参数，那么Order可能有一下方法：
12345class Order &#123;        getLineItem(aProduct:Product): OrderLine ...
            
          </div>
        
      </div>

         
    </div>
    
     
    <a class="right-panel  non-pic  "
      
      href="/hexo-blog/2022/02/20/UML%E5%BF%AB%E9%80%9F%E5%85%A5%E9%97%A8%E2%80%94%E2%80%94%E7%B1%BB%E5%9B%BE%E8%BF%9B%E9%98%B6/" 
    >
       
      <i class="fa-solid fa-angle-right non-pic"></i>
       
    </a>
     
  </div>
  
</article>






   


<article id="post-UML快速入门——类图基础" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
   
  <div class="article-inner">
    <div class="article-main">
      <header class="article-header">
        
<div class="main-title-bar">
  <div class="main-title-dot"></div>
  
    
      <h1 itemprop="name">
        <a class="p-name article-title" href="/hexo-blog/2022/02/19/UML%E5%BF%AB%E9%80%9F%E5%85%A5%E9%97%A8%E2%80%94%E2%80%94%E7%B1%BB%E5%9B%BE%E5%9F%BA%E7%A1%80/">UML快速入门——类图基础</a>
      </h1>
    
  
</div>

        <div class='meta-info-bar'>
          <div class="meta-info">
  <time class="dt-published" datetime="2022-02-18T16:00:00.000Z" itemprop="datePublished">2022-02-19</time>
</div>
          <div class="need-seperator meta-info">
            <div class="meta-cate-flex">
  
  <a class="meta-cate-link" href="/hexo-blog/categories/%E5%89%8D%E7%AB%AF%E7%AC%94%E8%AE%B0/">前端笔记</a>
   
</div>
  
          </div>
          <div class="wordcount need-seperator meta-info">
            875 词 
          </div>
        </div>
        
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/hexo-blog/tags/%E6%9E%B6%E6%9E%84/" rel="tag">架构</a></li></ul>

      </header>
      <div class="e-content article-entry" itemprop="articleBody">
        
          <div class="truncate-text">
            
              「这是我参与2022首次更文挑战的第23天，活动详情查看：2022首次更文挑战」
UML介绍统一建模语言（UML）是一组图形表示法。
20世纪80年代，随着面向对象编程思想的流程，出现了不少面向对象图形的建模语言，这些语言往往大同小异，但是一些关键图形表示方法的区别往往会产生很大的误解，这种混乱的现象持续了很久，直到1997年UML 1.0的出现。
下图展示了UML的官方图形分类：

好的图形经常可以帮助沟通设计思想，也能帮助你理解软件系统或业务流程。即便我们不会画这些设计图，但至少也要能看懂别人画的图。
类图类图（class diagram）描述系统中的对象类型，以及存在于它们之间的各种静态关系。类图也展示类的性质和操作，以及应用于对象连接方式的约束。
下面是一个简单的类图： 
属性属性可以用一行代码来描述： visibility name : type multiplicity = default &#123;property-string&#125;

visibility:可访问行。 +表示public，-表示private，另外还有～（default）和＃（protec...
            
          </div>
        
      </div>

         
    </div>
    
     
    <a class="right-panel  non-pic  "
      
      href="/hexo-blog/2022/02/19/UML%E5%BF%AB%E9%80%9F%E5%85%A5%E9%97%A8%E2%80%94%E2%80%94%E7%B1%BB%E5%9B%BE%E5%9F%BA%E7%A1%80/" 
    >
       
      <i class="fa-solid fa-angle-right non-pic"></i>
       
    </a>
     
  </div>
  
</article>







  <nav id="page-nav">
    <!-- 在第二页时 page.prev_link 不知为何无法返回正确的链接 -->
    <a id="prev-btn" class="page-nav-btn disabled" href=" /hexo-blog/  ">
      <i class="fa-solid fa-angle-left"></i>
    </a>
    <div id="num-bar">
      <span class="page-number current">1</span><a class="page-number" href="/hexo-blog/page/2/">2</a><a class="page-number" href="/hexo-blog/page/3/">3</a><span class="space">&hellip;</span><a class="page-number" href="/hexo-blog/page/10/">10</a>  
    </div>
    <a id="next-btn" class="page-nav-btn " href="/hexo-blog/page/2/">
      <i class="fa-solid fa-angle-right"></i>
    </a>
  </nav>


    </div>
    <div id="footer-wrapper">
      <footer id="footer">
  
  <div id="footer-info" class="inner">
    
    &copy; 2024 Zachary<br>
    <!-- Powered by <a href="https://hexo.io/" target="_blank">Hexo</a> & Theme <a target="_blank" rel="noopener" href="https://github.com/saicaca/hexo-theme-vivia">Vivia</a> -->
      <a target="_blank" rel="noopener" href="https://beian.miit.gov.cn">苏ICP备20030005号-2</a>
  </div>
</footer>

    </div>
    <div class="back-to-top-wrapper">
    <button id="back-to-top-btn" class="back-to-top-btn hide" onclick="topFunction()">
        <i class="fa-solid fa-angle-up"></i>
    </button>
</div>

<script>
    function topFunction() {
        window.scroll({ top: 0, behavior: 'smooth' });
    }
    let btn = document.getElementById('back-to-top-btn');
    function scrollFunction() {
        if (document.body.scrollTop > 600 || document.documentElement.scrollTop > 600) {
            btn.classList.remove('hide')
        } else {
            btn.classList.add('hide')
        }
    }
    window.onscroll = function() {
        scrollFunction();
    }
</script>

  </div>
  <script src="/hexo-blog/js/light-dark-switch.js"></script>
</body>
</html>
